<template>
<div class="video-wrap">
    <van-nav-bar
      title="清晨课程"
      left-text="返回"
      left-arrow
      @click-left="navBack"
    />
    <van-tabs v-model="active" :swipe-threshold="5">
        <van-tab :title="item" v-for="(item,index) in navText" :key="index">
            <div class="product shadow" v-for="item in list" :key="item.id" @click="goVideo(item)">
                <div class="header-title">
                    <h3 class="text-dn-two">{{ item.title }}</h3>
                </div>
                <div class="header-time">{{ item.time }}</div>
                <div class="avatar">
                    <img :src="item.avatar">
                </div>
                <div class="tool">
                    <div>
                        <van-image width="30px" height="30px" src="https://img.yzcdn.cn/vant/cat.jpeg" style="vertical-align:middle" round />
                        <span>讲师</span>
                        <van-tag type="danger">关注</van-tag>
                    </div>
                    <div class="text-right" style="color: #666">
                        <van-icon style="vertical-align:middle" name="browsing-history-o" /> 999人
                        <van-icon style="vertical-align:middle;line-height: 30px" name="chat-o" size="16" /> 4人
                        <van-icon style="vertical-align:middle" name="thumb-circle-o" size="16" /> 233人
                    </div>
                </div>
            </div>
        </van-tab>
    </van-tabs>
</div>
</template>

<script>
export default {
    name: 'Video',
    data() {
        return {
            active: 0,
            navText: [
                '全部',
                '情感',
                '励志',
                '职场',
                '生活'
            ],
            list:[]
        }
    },
    created(){
      
      this.getData()
    },
    methods: {
      async getData(){
        await this.axios.get('https://www.fastmock.site/mock/9268a9820983dcd23a17faef4f4dbfea/video/video')
        .then(res=>this.list = res.data.list).catch(err=>console.log(err))
      },
      navBack(){
        this.$router.go(-1)
      },
      goVideo(item){
        console.log(item);
        this.$router.push({name:'videoproductvideo',path:'../product/video'})
      }
    }
}
</script>

<style lang="less" scoped>
// @text: (
//   text-xl : '16px          '
// );
.video-wrap {

    .product {
        padding: .5rem 14px;
        background: white;
        margin: .85999rem 0;

        .header-title {
            h3 {
                margin: .3rem 0;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
            }
        }

        .header-time {
            color: #999;
            padding: 0 0 .29rem;
        }

        .avatar {
            width: 100%;
            margin-bottom: .577rem;

            img {
                width: 100%;
                height: 100%;
                border-radius: .3rem;
            }
        }

        .tool {
            display: flex;
            justify-content : space-between;
            &> div {
                display: block;
            }
            & span {
                padding: 0 .5rem
            }
        }

    }

    .product-2 {
        margin-top: 5px;
        background-color: white;
        padding: 5px 10px;
        display: grid;
        grid-template-columns: 95px 1fr;


        .info {
            display: grid;
            grid-template-rows: 1fr 22px;

            .title {
                font-size: 16px;
            }

            p {
                margin: 0;
            }
        }
    }
}
</style>
